<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
    <link rel="stylesheet" href="css/guess.css">
    
    
</head>
<body>
<!-- 1. 随机生成一个 100 以内的自然数。
     2. 记录玩家当前的轮数。从 1 开始。
     3. 为玩家提供一种猜测数字的方法。
     4. 一旦有结果提交，先将其记录下来，以便用户可以看到他们先前的猜测。
     5. 然后检查它是否正确。
     6. 如果正确：
        1. 显示祝贺消息。
        2. 阻止玩家继续猜测（这会使游戏混乱）。
        3. 显示控件允许玩家重新开始游戏。
     7. 如果出错，并且玩家有剩余轮次：
        1. 告诉玩家他们错了。
        2. 允许他们输入另一个猜测。
        3. 轮数加 1。
     8. 如果出错，并且玩家没有剩余轮次：
        1. 告诉玩家游戏结束。
        2. 阻止玩家继续猜测（这会使游戏混乱）。
        3. 显示控件允许玩家重新开始游戏。
     9. 一旦游戏重启，确保游戏的逻辑和 UI 完全重置，然后返回步骤 1。 -->
    
    
     
    <div class="all">
        <h1>猜数字游戏</h1>
        <div class="game">
            <p>我已随机生成一个1到100之间的随机数，你有10次机会猜测，每次猜数都会缩小范围，所以请尽情摸索吧</p>
        </div>
        <div class="play">
            <label for="guess">请输入你心中的数字</label>
            <input id="guess" class="guessField" />
            <input type="submit" value="确定" class="guessubmit" />
        </div>
        <div class="result">
            <p class="yourguess"></p>
            <p class="guesstruth"></p>
            <p class="guesstip"></p>
        </div>

    </div>
</body>
<script src="js/guess.js"></script> 
</html>